<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="paypal-button"></div>
    <!-- Load the required components. -->
    <script src="https://js.braintreegateway.com/web/3.16.0/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.16.0/js/paypal-checkout.min.js"></script>

    <!-- Use the components. We'll see usage instructions next. -->
    <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
    <script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
        // Create a client.
        braintree.client.create({
            authorization: "{$clientToken}"
        }, function (clientErr, clientInstance) {

            // Stop if there was a problem creating the client.
            // This could happen if there is a network error or if the authorization
            // is invalid.
            if (clientErr) {
                console.error('Error creating client:', clientErr);
                return;
            }

            // Create a PayPal Checkout component.
            braintree.paypalCheckout.create({
                client: clientInstance
            }, function (paypalCheckoutErr, paypalCheckoutInstance) {

                // Stop if there was a problem creating PayPal Checkout.
                // This could happen if there was a network error or if it's incorrectly
                // configured.
                if (paypalCheckoutErr) {
                    console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
                    return;
                }

                // Set up PayPal with the checkout.js library
                paypal.Button.render({
                    env: 'sandbox', // or 'sandbox'

                    payment: function () {
                        return paypalCheckoutInstance.createPayment({
                            flow: 'checkout', // Required
                            amount: 10.00, // Required
                            currency: 'USD', // Required
                            locale: 'en_US',
                            enableShippingAddress: true,
                            shippingAddressEditable: false,
                            shippingAddressOverride: {
                                recipientName: 'Scruff McGruff',
                                line1: '1234 Main St.',
                                line2: 'Unit 1',
                                city: 'Chicago',
                                countryCode: 'US',
                                postalCode: '60652',
                                state: 'IL',
                                phone: '123.456.7890'
                            }
                        });
                    },

                    onAuthorize: function (data, actions) {
                        return paypalCheckoutInstance.tokenizePayment(data)
                            .then(function (payload) {
                                $.ajax({
                                    url: 'http://hk.net18.top/facebook/paypal/notify',
                                    type: 'post',
                                    data: {
                                        nonce: payload.nonce,
                                        amount: 10.00
                                    },
                                    success: function(data){
                                        alert(data);
                                    }
                                })
                                // Submit `payload.nonce` to your server
                            });
                    },

                    onCancel: function (data) {
                        console.log('checkout.js payment cancelled', JSON.stringify(data, 0,
                            2));
                    },

                    onError: function (err) {
                        console.error('checkout.js error', err);
                    }
                }, '#paypal-button').then(function () {
                    // alert('准备就绪')
                    // The PayPal button will be rendered in an html element with the id
                    // `paypal-button`. This function will be called when the PayPal button
                    // is set up and ready to be used.
                });

            });

        });
    </script>

</body>

</html>